<template>
	<view class="">
		<view class="main">
			<view class="price container">总价格：{{totalPrice}}元</view>
			<view class="list_group">
				<view class="list_item_con container">
					<view class="itrm_title">漫展名称</view>
					<input class="ipt" type="text" :value="name" disabled="true" />
				</view>
				<view class="list_item_con container">
					<view class="itrm_title">地址</view>
					<input class="ipt" type="text" :value="address" disabled="true" />
				</view>
				<view class="list_item_con container">
					<view class="itrm_title">购票数量</view>
					<input class="ipt" type="text" :value="ticketNum+'  张'" disabled="true" />
				</view>
				<view class="list_item_con container">
					<view class="itrm_title">单张金额</view>
					<view class="ipt amount">
						￥{{price}}
					</view>
				</view>
			</view>

			<radio-group @change="radioChange" class="pay_group">
				<label class="pay_item_con container" v-for="(item, index) in items" :key="item.value">
					<view class="title_con">
						<view class="img_con"><image class="img" :src="item.url" mode="widthFix"></image></view>
						<view class="pay_title">{{item.name}}</view>
					</view>
					<view><radio :value="item.name" :checked="index === current" color="#fead38" /></view>
				</label>
			</radio-group>
		</view>
		<view class="pay_btn_group">
			<!-- 支付按钮 -->
			<button type="default" class="pay_btn" @click="open">支付</button>
		</view>
		<u-popup v-model="show" mode="center" >
			<apply-popup :url="url" :content="content" ></apply-popup>
		</u-popup>
		
	</view>
</template>

<script>
	import applyPopup from "@/components/uni-popup/apply-popup.vue"
export default {
	
	data() {
		return {
			url:"/static/icon/img_icon14.png@2x.png",
			content:{
				title:"支付成功",
				text:"您已经支付成功了~~~~"
			},
			items: [
				{
					url: '/static/icon/pay/zfbico@2x.png',
					name: '支付宝'
				},
				{
					url: '/static/icon/pay/wxico@2x.png',
					name: '微信'
				},
				{
					url: '/static/icon/pay/ylico@2x.png',
					name: '银联'
				}
			],
			current: 0,
			price:0,
			ticketNum:null,
			// totalPrice:0
			address:"",
			name:"",
			show:false
		};
	},
	components: {
		applyPopup
	},
	methods: {
		radioChange(evt) {
			console.log(evt)
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].name === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		 open(){
			 // console.log(this.$refs)
         this.show=true
      },
	  getPayInfo(val){
		  // console.log(this)
		  this.price=val.price
		  this.ticketNum=val.ticketNum
	  },
	  getConmicInfo(val){
		  const ctx=this
		  this.$request('/comic-time/getExhibitionById', {exhibitionId:val},'GET',).then(res=>{
			  ctx.address=res.data.exhibitionAddress
			  ctx.name=res.data.exhibitionName
			  ctx.detailData=res.data
			  // console.log(res.data)
		  })
		  
	  }
	},
	computed:{
		totalPrice(){
			return this.ticketNum*this.price+".00"
		}
	},
	onLoad(e) {
		// console.log(this)
		this.getPayInfo(e);
		this.getConmicInfo(e.exhibitionId)
		
	}
};
</script>

<style lang="scss" scoped>
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
.main {
	background-color: #f0f3f8;
	.price {
		padding-top: 20rpx;
		font-family: PingFangSC-Semibold;
		font-size: 36rpx;
		font-weight: 500;
		padding-bottom: 48rpx;
		letter-spacing: 1rpx;
		color: #fe5976;
		background-color: #ffffff;
	}
	.list_group {
		padding-bottom: 16rpx;
		.list_item_con {
			height: 84rpx;
			width: 100%;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 2rpx;
			.itrm_title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				line-height: 84rpx;
				color: #333333;
			}
			.ipt {
				
				text-align: right;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				line-height: 84rpx;
				color: #666666;
			}
			.amount {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #fe5976;
			}
		}
	}
	.pay_group{
		padding-bottom: 2rpx;
		.pay_item_con{
			height: 104rpx;
			width: 100%;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title_con{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-family: PingFangSC-Regular;
					font-size: 28rpx;
					line-height: 33rpx;
					color: #333333;
				.img_con{
					width: 48rpx;
					height: 48rpx;
					overflow: hidden;
					margin-right: 10rpx;
					.img{
						width: 100%;
					}
				}
			}
		}
	}
}
.pay_btn_group {
		box-sizing: border-box;
		padding: 0 20rpx 20rpx 20rpx;
		width: 100%;
		// height: 168rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		
		.pay_btn {
			width: 100%;
			height: 88rpx;
			background-color: #ff6262;
			border-radius: 44rpx;
			font-family: PingFangSC-Medium;
				font-size: 36rpx;
				line-height: 88rpx;
				color: #ffffff;
		}
	}
</style>
